<template>
    <div class="content">
        <div class="top"></div>
        <div class="card10">
            <div class="header-bg1">
                    <div class="h-title" style="padding-top:.1rem">确认比赛结果</div>
                </div>   
            <div style="padding:0 .6rem;">
                <div style="margin-top: 0.3rem">
                    <span class="title">冠军奖励：</span>
                    <input class="input1" type="Number" v-model="reward" id="number" placeholder="请输入冠军奖励" />
                    <span class="title" style="margin-left:.2rem;">元代金券</span>
                </div>
                <div style="margin-top: 0.3rem">
                    <span class="title">亚军奖励：</span>
                    <input class="input1" type="Number" v-model="reward1" id="number" placeholder="请输入亚军奖励：" />
                    <span class="title" style="margin-left:.2rem;">元代金券</span>
                </div>
                <div style="margin-top: 0.3rem">
                    <span class="title">出现者奖励：</span>
                    <input class="input2" type="Number" v-model="reward2" id="number" placeholder="请输入" />
                    <span class="title" style="margin-left:.2rem;">元代金券</span>
                </div>
            </div>

            <van-row style="text-align: center;font-size: .4rem;margin-top: .3rem;">
                <van-col span="6">用户手机号</van-col>
                <van-col span="6">冠军</van-col>
                <van-col span="6">亚军</van-col>
                <van-col span="6">出线</van-col>
            </van-row>
            <van-row style="text-align: center;margin-top: .3rem;" v-for="(item, index) in tableList" :key="index">
                <van-col span="6">{{ item.phone ?  item.phone : '麻将选手'}}</van-col>
                <van-col span="6">
                    <van-radio-group v-model="radio" style="margin-left: 1rem;" @click="radioClick(index)">
                        <van-radio :name="index" shape="square"></van-radio>
                    </van-radio-group>
                </van-col>
                <van-col span="6">
                    <van-radio-group v-model="radio1" style="margin-left: 1rem;" @click="radioClick(index)">
                        <van-radio :name="index" shape="square"></van-radio>
                    </van-radio-group>
                </van-col>
                <van-col span="6">
                    <van-checkbox v-model="item.check" ref="checkboxes" :name="index"
                        style="margin-left: 1rem;"></van-checkbox>
                </van-col>
            </van-row>

        </div>
            <div class="dloBtnS"  @click="sumbitFn">提交</div>
    </div>
</template>
  
<script>
import { getDetail, confirmResult } from "@/api/fulfil.js";
export default {
    data() {
        return {
            icon8: "require('@/assets/img/mj3.png')",
            icon9: "require('@/assets/img/mj4.png')",
            icon10: "require('@/assets/img/mj5.png')",
            icon11: "require('@/assets/img/mj6.png')",
            icon12: "require('@/assets/img/mj7.png')",
            icon13: "require('@/assets/img/mj8.png')",
            radio: '',
            radio1: '',
            checked: false,
            radioIndex: '',
            list: [{
                check: true
            }, {
                check: true
            }, {
                check: true
            }, {
                check: false
            }, {
                check: true
            }, {
                check: false
            }],
            tableList: [],
            password1: '',
            reward: '',
            reward1: '',
            reward2: ''
        };
    },
    mounted() {
        this.getDetail();
    },
    methods: {
        sumbitFn() {
            this.tableList;
            let arr = [];

            this.tableList.forEach((item, index) => {
                if (this.radio == index) {
                    arr.push({
                        userid: item.id,
                        ranking: 1,
                        reward: Number(this.reward),
                        titleBar: '冠军'
                    })
                }
                if (this.radio1 == index) {
                    arr.push({
                        userid: item.id,
                        ranking: 2,
                        reward: Number(this.reward1),
                        titleBar: '亚军'
                    })
                }
                if (item.check == true) {
                    arr.push({
                        userid: item.id,
                        ranking: 3,
                        reward: Number(this.reward2),
                        titleBar: '出线'
                    })
                }
            })
           confirmResult({
                agentid: localStorage.getItem("agentid"),
                mid: localStorage.getItem("mid"),
                reslist: arr,
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        this.$Toast('确认结果成功！');
                        this.$router.go(-1);    
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        //座位列表
        getDetail() {
            getDetail({
                agentid: localStorage.getItem("agentid"),
                mid:  localStorage.getItem("mid"),
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        let tableList = [];
                        res.data.data.forEach((item, index) => {
                            item.check = false;
                            tableList.push(item);
                        })
                        this.tableList = tableList;
                        console.log(this.tableList, 'this.tableList');
                    } else {
                        this.$Toast(res.data.msg);
                    }
                    console.log(res, 'res');

                })
                .catch((error) => {
                    this.changeShow = false;
                    console.log(error);
                });
        },
        radioClick(index) {
            this.radioIndex = index;
            this.radio = index;
        }
    },
};
</script>
  
<style scoped>
.content {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: #F4F3F8;

}

.top {
    width: 100%;
    height: 3rem;
    background: linear-gradient(to bottom, #93c9af, #F4F3F8);
}

.header {
    overflow: hidden;
    box-sizing: border-box;
    padding: .4rem;
    margin: -2.5rem auto 0;
    width: 90%;
    height: 4rem;
    background-color: #fff;
    border-radius: .4rem;

}

.header-bg {
    box-sizing: border-box;
    margin: 0 auto 0;
    width: 5.4625rem;
    height: .9rem;
    background: url('@/assets/img/plan.png') no-repeat;
    background-size: 100% 100%;
    font-size: .35rem;
    color: #000;
    text-align: center;
    font-weight: 600;
    line-height: 1.1rem;
}

.h-title {
    margin-left: .5rem;
}

.card-top-img {
    width: .3625rem;
    height: .3625rem;
}

.card-top {
    padding: 0 .4rem;
    margin-top: .3rem;
}

.card-top-btn {
    float: right;
    display: inline-block;
    width: 2.375rem;
    height: .675rem;
    background: #ddf0e6;
    border-radius: .225rem;
    color: #1E9858;
    text-align: center;
    line-height: .675rem;
}

.times {
    margin-left: .3rem;
    font-size: .35rem;
    font-weight: bold;
}

.card3-bg {
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto;
    width: 100%;
    height: 11.3875rem;
    background: url('@/assets/img/bg1.png') no-repeat;
    background-size: 100% 100%;
}

.card3-top {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 3.75rem;
}

.card3-zhuo {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 1.4875rem;
    height: 1.1875rem;
    text-align: center;
    line-height: .5625rem;
    transform: translate(-50%, -50%);
    background: url('@/assets/img/mjzhuo.png') no-repeat;
    background-size: 100% 100%;
    font-size: .25rem;
    font-weight: 600;
}

.card10 {
    padding: .3rem .2rem;
    margin: -2.3rem auto 0;
    width: 90%;
    height: 85vh;
    background-color: #fff;
    overflow-y: auto;
    border-radius: .5rem;
}

.card3-zhuo1 {
    position: absolute;
    top: .375rem;
    left: 1.675rem;
}

.card3-zhuo2 {
    position: absolute;
    top: 1.375rem;
    left: .375rem;
}

.card3-zhuo3 {
    position: absolute;
    bottom: .375rem;
    left: 1.675rem;
}

.card3-zhuo4 {
    position: absolute;
    top: 1.375rem;
    right: .375rem;
}

.majiang-icon {
    display: block;
    width: .75rem;
    height: .75rem;
}


.card3-btn {
    margin: .3rem 3.5% 0;
    display: inline-block;
    width: 25%;
    height: .6875rem;
    background-color: #1e9858;
    text-align: center;
    line-height: .6875rem;
    color: #fff;
    font-size: .4rem;
    border-radius: .4rem;
    border: 1px solid #f98c1c;
}

.card3-btn1 {
    margin: .3rem 3.5%;
    display: inline-block;
    width: 25%;
    height: .6875rem;
    background-color: #1e9858;
    text-align: center;
    line-height: .6875rem;
    color: #fff;
    font-size: .4rem;
    border-radius: .4rem;
}

.input1 {
    padding-left: .3rem;
    width: 40%;
    height: .8rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.input2 {
    padding-left: .3rem;
    width: 35%;
    height: .8rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.title {
    font-size: .4rem;
    color: #000;
}

.input {
    padding-left: .3rem;
    width: 60%;
    height: .8rem;
    border-color: #ccc;
    border-radius: .1rem;
}

.dloBtn {
    display: inline-block;
    width: 35%;
    height: 1rem;
    background: #dcf0e5;
    color: #1d9858;
    border-radius: .5rem;
    text-align: center;
    line-height: 1rem;
    margin: .3rem auto;
}

.dloBtnS {
    display: inline-block;
    width: 70%;
    height: 1rem;
    background: #1d9858;
    color: #fff;
    border-radius: .5rem;
    text-align: center;
    line-height: 1rem;
    margin: .2rem 15%;
}
.header-bg1 {
    box-sizing: border-box;
    margin: 0 auto .2rem;
    width: 4.4625rem;
    height: 1.1rem;
    background: url('@/assets/img/bisaijieguo.png') no-repeat;
    background-size: 100% 100%;
    font-size: .35rem;
    color: #000;
    text-align: center;
    font-weight: 600;
    line-height: 1.1rem;
}
.h-title {
    margin-left: .5rem;
}
.norecords {
    margin-top: 2rem;
    color: #ffbe4c;
    font-size: .5rem;
    text-align: center;
}
</style>